<template>
  <div class="loginDiv">
    <div class="login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item prop="name">
          <el-input
            placeholder="请输入用户名"
            ref="name"
            v-model.trim="ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            type="password"
            placeholder="请输入登录密码"
            v-model.trim="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-right"
          @click="submit('ruleForm')"
          size="small"
          circle
          class="button-submit"
        ></el-button>
      </el-form>
      <div class="footer">
        <span>
          <a class="otherLogin">{{ loginContent.thirdLogin }}</a>
          <a href="#">
            <img src="../assets/images/upload/QQ.png" />
          </a>
          <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx845389d9debe8bdf&redirect_uri=http://dmsdbj.com/auth-web/weChatLogin&response_type=code&scope=snsapi_login&state=http://dmsdbj.com/auth-web/navigation/frame@http://dmsdbj.com/auth-web/navigation/thirdLoginBind">
            <img src="../assets/images/upload/WeCat.png" />
          </a>
        </span>
        <el-button type="text" class="registerButton" @click="register">{{
          loginContent.register
        }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { loginContent } from "../pageconst/LoginConst.js";

export default {
  data: function () {
    return {
      ruleForm: {
        name: "",
        pass: "",
      },
      loginContent: loginContent,
      rules: {
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 1,
            max: 22,
            message: "长度在 1 到 22 个字符",
            trigger: "blur",
          },
        ],
        pass: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 1,
            max: 22,
            message: "长度在 1 到 22 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
};
</script>

<style src="../assets/css/viewcss/Login.css" scoped></style>